<template>
	<map id="my_map" :longitude="116.379831" :latitude="39.865557" scale="14" show-location :polyline="polyline"
		style="width: 100%; height: 300px;" :markers="markers">
	</map>
</template>

<script setup>
	import points from "./Data.js"
	import {
		maskPhoneNumber
	} from "@/utils/index.js"
	console.log(points)
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const polyline = ref(
		[{
			points,
			color: "#FF4110",
			borderColor: "#000",
			width: 8,
			arrowLine: true
		}]
	)

	const markers = ref(
		[{
			id: 0,
			latitude: 39.865557,
			longitude: 116.379831,
			width: 25,
			height: 40,
			iconPath: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
			callout: {
				content: '距收获地1公里11 ',
				color: 'red',
				fontSize: 12,
				display: 'ALWAYS',
				borderRadius: 10,
				borderColor: '#909399',
			}
		}])
	const includes = ref([])
	onLoad(() => {
		let MapContext = uni.createMapContext('my_map');
		let timer = setInterval(() => {
			polyline.value[0].points = polyline.value[0].points.slice(5)
			includes.value = polyline.value[0].points
			//每次更新路线坐标时，调整地图缩放包含所有点

			MapContext.includePoints({
				points: polyline.value[0].points,
				padding: [40, 40, 40, 40],
			})

			if(polyline.value[0].points.length>0){
				markers.value[0].rotate = getAngle(polyline.value[0].points[0], polyline.value[0].points[1]);
				markers.value[0].latitude = polyline.value[0].points[0].latitude
				markers.value[0].longitude = polyline.value[0].points[0].longitude
				console.log(polyline.value[0].points[0].latitude);
			}else{
				clearInterval(timer)
			}
		}, 3000)
	})

	//传入两个经纬度点得到车辆角度 设置车辆Marker角度
	const getAngle = (startPoint, endPoint) => {
		if (!(startPoint && endPoint)) {
			return 0;
		}
		let dRotateAngle = Math.atan2(
			Math.abs(startPoint.longitude - endPoint.longitude),
			Math.abs(startPoint.latitude - endPoint.latitude)
		);
		if (endPoint.longitude >= startPoint.longitude) {
			if (endPoint.latitude >= startPoint.latitude) {} else {
				dRotateAngle = Math.PI - dRotateAngle;
			}
		} else {
			if (endPoint.latitude >= startPoint.latitude) {
				dRotateAngle = 2 * Math.PI - dRotateAngle;
			} else {
				dRotateAngle = Math.PI + dRotateAngle;
			}
		}
		dRotateAngle = (dRotateAngle * 180) / Math.PI;
		return dRotateAngle;
	}
</script>

<style>
</style>